@import "index.less";
.Top_position {
  .mainsVw {
    background: url(../images/enginCase01.png) no-repeat center center / cover;
  }
}
#enginCase {
  .container {
    .mainEnginCase_list {
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      .mainEnginCase_item {
        width: 32%;
        margin-right: 2%;
        margin-bottom: 20px;
        cursor: pointer;
        .con_item {
          position: relative;
          margin-bottom: 10px;
          .img {
            width: 100%;
            overflow: hidden;
            transition: all 0.5s;
            img {
              transition: all 1.5s;
            }
          }
          .wall {
            width: 100%;
            height: 100%;
            background: @color;
            opacity: 0.8;
            bottom: 0;
            position: absolute;
            display: none;
            .itemtTitle {
              text-align: center;
              font-size: 20px;
              font-weight: bold;
              color: #fff;
              margin-top: 58px;
              margin-bottom: 20px;
              /* 超出限定行数省略号 */
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .itemText {
              width: 90%;
              margin: 0 auto;
              font-size: 14px;
              color: #fff;
              margin-bottom: 63px;
              /* 超出限定行数省略号 */
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .btn {
              width: 126px;
              height: 31px;
              border: 2px solid #ffffff;
              border-radius: 15px;
              font-size: 14px;
              line-height: 31px;
              text-align: center;
              margin: 0 auto;
              color: #fff;
              &.active,
              &:hover {
                cursor: pointer;
                // background: #b9251f;
                color: #fff;
              }
            }
          }
        }

        .text {
          font-size: 16px;
          line-height: 20px;
          text-align: center;
        }
        &:hover {
          img {
            transform: scale(1.1);
          }
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}
// &.active,
// &:hover {
//   cursor: pointer;
//   background: #b9251f;
//   color: #fff;
// }
@media screen and (max-width: 1370px) {
  #enginCase {
    .container {
      .mainEnginCase_list {
        .mainEnginCase_item {
          .wall {
            .itemText {
              margin-bottom: 43px;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  #enginCase {
    .container {
      .mainEnginCase_list {
        .mainEnginCase_item {
          .wall {
            .itemtTitle {
              margin-top: 27px;
            }
            .itemText {
              margin-bottom: 43px;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 850px) {
  #enginCase {
    .container {
      .mainEnginCase_list {
        flex-wrap: wrap;
        justify-content: space-between;
        .mainEnginCase_item {
          width: 49%;
          margin-bottom: 20px;
          margin-right: 0;
          .wall {
            .itemtTitle {
              margin-top: 58px;
            }
            .itemText {
              margin-bottom: 63px;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 700px) {
  #enginCase {
    .container {
      .mainEnginCase_list {
        flex-wrap: wrap;
        .mainEnginCase_item {
          width: 100%;
          .wall {
            .itemtTitle {
              font-size: 16px;
              margin-top: 20px;
            }
            .itemText {
              font-size: 10px;
              margin-bottom: 43px;
            }
            .btn {
              display: none;
            }
          }
        }
      }
    }
  }
}
